<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1 input {
				background: gray;
			}
			
			#div1 input.active {
				background: red;
			}
			
			#div1 div {
				padding: 10px 10px;
				width: 590px;
				height: 150px;
				background: red;
				display: none;
				text-align: center;
			
			}
			
			#div1 div.active {
				display: block;
			}
			
			#div1 div.a{
				background: green;
			}
			
			#div1 div.b{
				background: blue;
			}
			
			
		</style>
	</head>

	<body>
		<div id="div1">
			<div class="active">london</div>
			<div class="a">Paris</div>
			<div class="b">Tokyo</div>
			<input id="btn" type="button" value="london" class="active" style="width: 200px; height: 30px;" />
			<input id="btn" type="button" value="paris" style="width: 200px; height: 30px;"/>
			<input id="btn" type="button" value="tokyo" style="width: 200px; height: 30px;"/>
			
		</div>
		<script>
			//获取元素
			var dom = document.getElementById('div1');
			//获取按钮
			var btns = dom.getElementsByTagName('input');
			//获取div框
			var divs = dom.getElementsByTagName('div');
			//给3个按钮添加点击事件（函数）
			for(var i = 0; i < btns.length; i++) {
				btns[i].onclick = function() {
					//点击某个按钮：改变按钮背景色；下面div框架是否显示
					//1、所有按钮背景色白色；当前点击的按钮背景色黄色
					for(var j = 0; j < btns.length; j++) {
						btns[j].style.background = 'gray';
					}
					if(this==btns[0]){
						this.style.background='red';
					
					}else if(this==btns[1]){
						this.style.background='green';
					}else if(this==btns[2]){
						this.style.background='blue';
					}
					
					//2、当前框显示其他框隐藏	
					for(var k = 0; k < divs.length; k++) {
						if(this == btns[k]) {
							divs[k].style.display = 'block';
							
						} else {
							divs[k].style.display = 'none';
						}
					}
				}
			}
		</script>
	</body>

</html>